<template>
  <basic-container>
  <div  v-loading="loading"  :element-loading-text="loadingText">
    <div :style="{ width: '100%', height: '5vh',lineHeight: '5vh',display: 'inline-block;' ,background: 'white'}">
<!--
      <el-input v-model="searchDocNo"  @keyup.enter.native="getData(searchDocNo,searchDeviceSn)" style="width:200px;margin-left: 5px" placeholder="请输入工单号"></el-input>
-->
      <el-select v-model="searchDocNo" placeholder="请选择工单号"  filterable clearable style="width:200px;margin-left: 5px">
        <el-option
          @click.native="getData(searchDocNo,searchDeviceSn)"
          v-for="item in docNoList"
          :key="item.id"
          :label="item.docNo"
          :value="item.docNo">
        </el-option>
      </el-select>
      <el-input v-model="searchDeviceSn"  @keyup.enter.native="getData(searchDocNo,searchDeviceSn)" style="width:200px;margin-left: 5px" placeholder="请输入设备编码"></el-input>
      <el-button type="primary" @click="getData(searchDocNo,searchDeviceSn)"  style="margin-left: 5px;height: 30px">查询</el-button>
      <el-button type="success" @click="lockDocNo" v-if="!isLocked">锁定</el-button> <!-- 新增锁定按钮，当未锁定时显示 -->
      <el-button type="danger" @click="unlockDocNo" v-if="isLocked">解锁</el-button> <!-- 新增解锁按钮，当已锁定时显示 -->
      <el-button type="primary"  class="filter-item" plain  size="small"  icon="el-icon-download" @click="exportExcel(searchDocNo,searchDeviceSn)">导出</el-button>
    </div>
    <el-tabs v-model="activeName"  @tab-click="handleTabs">
      <el-tab-pane label="图表展示" name="first">
        <div :style="{ width: '100%', height: '70vh',background: 'white'}">
            <div ref="chartIl" :style="{ width: '100%', height: '33%'}"></div>
            <div ref="chartTXRl" :style="{ width: '100%', height: '33%'}"></div>
            <div ref="chartRXRl" :style="{ width: '100%', height: '33%'}"></div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="列表展示" name="second">
        <div :style="{ width: '100%', height: '70vh',display: 'flex' ,background: 'white'}">
          <el-table :data="tableData" ref="tableGENRef" height="100%" border style="width: 100%;margin-bottom: 40px">
            <el-table-column prop="docNo" label="工单" show-overflow-tooltip align="center" ></el-table-column>
            <el-table-column prop="sn"   label="SN" show-overflow-tooltip align="center" ></el-table-column>
            <el-table-column prop="no"  label="NO" show-overflow-tooltip align="center" ></el-table-column>
            <el-table-column prop="il1" label="插损" show-overflow-tooltip align="center" > </el-table-column>
            <el-table-column prop="rl1" label="回损" show-overflow-tooltip align="center" > </el-table-column>
            <el-table-column prop="time" label="时间" show-overflow-tooltip align="center" > </el-table-column>
            <el-table-column prop="il1" label="插损状态" show-overflow-tooltip align="center" >
              <template slot-scope="scope">
                <el-tag v-if="parseFloat(scope.row.il1) >=0 && parseFloat(scope.row.il1)< 0.3" type="success">合格</el-tag>
                <el-tag v-if="parseFloat(scope.row.il1) >=0.3 && parseFloat(scope.row.il1)< 0.35" type="warning">偏离</el-tag>
                <el-tag v-if="parseFloat(scope.row.il1) >=0.35" type="danger"> 不合格</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="rl1" label="回损状态" show-overflow-tooltip align="center" >
              <template slot-scope="scope">
                <el-tag v-if="parseFloat(scope.row.rl1) >=47 && (scope.row.no==='A01' ||scope.row.no==='A02'||scope.row.no==='A03'||scope.row.no==='A04') " type="success">合格</el-tag>
                <el-tag v-if="parseFloat(scope.row.rl1) >=35 && (scope.row.no==='A05' ||scope.row.no==='A06'||scope.row.no==='A07'||scope.row.no==='A08') " type="success">合格</el-tag>
                <el-tag v-if="parseFloat(scope.row.rl1) >=45 && parseFloat(scope.row.rl1)< 47 && (scope.row.no==='A01' ||scope.row.no==='A02'||scope.row.no==='A03'||scope.row.no==='A04')" type="warning">偏离</el-tag>
                <el-tag v-if="parseFloat(scope.row.rl1) >=33 && parseFloat(scope.row.rl1)< 35 && (scope.row.no==='A05' ||scope.row.no==='A06'||scope.row.no==='A07'||scope.row.no==='A08')" type="warning">偏离</el-tag>
                <el-tag v-if="parseFloat(scope.row.rl1) <45 && (scope.row.no==='A01' ||scope.row.no==='A02'||scope.row.no==='A03'||scope.row.no==='A04')" type="danger"> 不合格</el-tag>
                <el-tag v-if="parseFloat(scope.row.rl1) <33 && (scope.row.no==='A05' ||scope.row.no==='A06'||scope.row.no==='A07'||scope.row.no==='A08')" type="danger"> 不合格</el-tag>

              </template>
            </el-table-column>
            <el-table-column prop="deviceSn" label="设备编码" show-overflow-tooltip align="center" > </el-table-column>
            <el-table-column prop="deviceSn" label="产线" show-overflow-tooltip align="center" >
              <template slot-scope="scope">
                <template v-for="item in lineList">
                  <template v-if="item.deviceSnStr && item.deviceSnStr.includes(scope.row.deviceSn)">
                    {{item.realityLineName}}
                  </template>
                </template>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
  </basic-container>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts/lib/chart/line';
import { ilRlGEN,ilRlGENIncremental} from '@/api/workorder/opltshhs';
import {getLineList} from '@/api/pfoc/realityproductlinemain' //获取产线集合,根据产线ID获取产线工序集合
import {getDocNoListByType} from "@/api/workorder/workordercps";

export default {
  name: 'GEN1.5-ILRL',
  data() {
    return {
      chartIl: null,
      chartTXRl: null,
      chartRXRl: null,
      chartIlData: [],//插损数据集
      chartTXRlData: [],//TX回损数据集
      chartRXRlData: [],//RX回损数据集
      totalData: [],//初始数据集
      tableData: [],//列表数据集
      lineList:[],//产线集合
      total:50,//默认显示点数
      docNo:null,//工单号用于查询
      loading: false,//加载遮盖开关
      loadingText: '加载中，请稍等...',
      incrementChartIlData:[],//插损增量数据集
      incrementChartTXRlData:[],//TX回损增量数据集
      incrementChartRXRlData:[],//RX回损增量数据集
      seq:null,//存储图表中显示的最新的seq(用于显示最新的一组插损数据或回损数据)
      totalSeq:null,//存储列表中最新的seq(用于拉取最新数据)
      timer:null,//定时器
      searchDocNo:null,//存储输入框的工单号
      isLocked: false, // 新增，用于标识是否处于锁定状态，初始值为 false
      lockedDocNo: null, // 新增，用于存储锁定的工单号
      searchDeviceSn:null,//存储输入框的设备编码
      deviceSn:null,//设备编码
      lockedDeviceSn:null, // 新增，用于存储锁定的设备编码
      docNoList:[],
      activeName: 'first'

    };
  },
  activated() {
    this.$nextTick(() => {
      const table = this.$refs.tableGENRef;
      if (table) {
        table.doLayout();
      }
      if (this.chartIl) {
        this.chartIl.resize();
      }
      if (this.chartTXRl) {
        this.chartTXRl.resize();
      }
      if (this.chartRXRl) {
        this.chartRXRl.resize();
      }
      // 启动定时任务
      this.timer = setInterval(() => {
        this.getIncrementalData();
      }, 30000); // 每分钟查询一次增量数据
    });
  },
  deactivated(){
    // 清除之前的定时任务
    clearInterval(this.timer);
  },
  created() {
    this.getDocNoGEN15ListData();
    //获取所有产线
    this.getLineListData();
  },
  mounted() {
    window.addEventListener('resize', this.onResize);
    const lockedState = localStorage.getItem('isGENLocked'); // 读取本地存储中的锁定状态
    const lockedDocNo = localStorage.getItem('lockedGENDocNo'); // 读取本地存储中的锁定工单号
    const lockedDeviceSn = localStorage.getItem('lockedGENDeviceSn'); // 读取本地存储中的锁定设备编码

    if (lockedState === 'true') {
      this.isLocked = true;
      this.lockedDocNo = lockedDocNo;
      this.lockedDeviceSn = lockedDeviceSn;
      this.searchDocNo = lockedDocNo;
      this.searchDeviceSn = lockedDeviceSn;
      // 调用 getData 方法，使用恢复的锁定工单号获取数据
      this.getData(this.lockedDocNo,this.lockedDeviceSn);
    }
  },
  beforeDestroy() {
    if (this.chartIl) {
      this.chartIl.dispose();
    }
    if (this.chartTXRl) {
      this.chartTXRl.dispose();
    }
    if (this.chartRXRl) {
      this.chartRXRl.dispose();
    }
    window.removeEventListener('resize', this.onResize);
    // 清除之前的定时任务
    clearInterval(this.timer);
    //清空table组件
    this.tableData = [];
  },
  methods: {
    // 锁定工单号的方法
    lockDocNo() {
      if (this.validatenull(this.searchDocNo)) {
        this.$message.error('请先选择工单再进行锁定!');
        return;
      }
      this.isLocked = true;
      this.lockedDocNo = this.searchDocNo;
      this.lockedDeviceSn = this.searchDeviceSn;
      // 将锁定状态和工单号存储到本地存储中
      localStorage.setItem('isGENLocked', 'true');
      localStorage.setItem('lockedGENDocNo', this.lockedDocNo);
      localStorage.setItem('lockedGENDeviceSn', this.lockedDeviceSn);
      // 调用查询数据的方法，使用锁定的工单号获取数据
      this.getData(this.lockedDocNo,this.lockedDeviceSn);
    },
    // 解锁工单号的方法
    unlockDocNo() {
      this.isLocked = false;
      this.lockedDocNo = null;
      this.lockedDeviceSn = null; // 清空锁定的设备编码
      // 清除本地存储中的锁定相关信息
      localStorage.removeItem('isGENLocked');
      localStorage.removeItem('lockedGENDocNo');
      localStorage.removeItem('lockedGENDeviceSn');
    },
    //获取产线集合
    getLineListData(){
      getLineList().then(response => {
        this.lineList = response.data.data;
      })
    },
    getDocNoGEN15ListData(){
      getDocNoListByType("GEN1.5").then(response => {
        this.docNoList = response.data.data;
      })
    },
    getData(docNo = null,deviceSn = 'null') {
      let actualDocNo = docNo || this.searchDocNo; // 如果传入了工单号参数就用参数，否则用选择框中的工单号
      let actualDeviceSn = deviceSn || this.searchDeviceSn; // 如果传入了工单号参数就用参数，否则用选择框中的工单号
      if (this.isLocked && this.lockedDocNo) {
        actualDocNo = this.lockedDocNo; // 如果处于锁定状态，使用锁定的工单号
        actualDeviceSn = this.lockedDeviceSn; // 如果处于锁定状态，使用锁定的设备编码
        this.searchDocNo = this.lockedDocNo;
        this.searchDeviceSn = this.lockedDeviceSn;
      } else {
        this.searchDocNo = actualDocNo;
        this.searchDeviceSn = actualDeviceSn;
      }
      if (this.validatenull(actualDocNo)) {
        this.$message.error('请选择工单!');
        return;
      }
      debugger;
      this.docNo = actualDocNo;
      this.deviceSn = actualDeviceSn;
      if(this.validatenull(this.deviceSn)){
        this.deviceSn = 'null';
      }
      // 清除之前的定时任务
      clearInterval(this.timer);
      this.loading = true;
      // 调用接口获取数据
      ilRlGEN(this.docNo,this.total,this.deviceSn).then(response => {
          this.totalData =  response.data;
          this.tableData = this.totalData.list;
          this.chartIlData = [...this.totalData.dataIl];
          this.chartTXRlData = [...this.totalData.dataTXRl];
          this.chartRXRlData = [...this.totalData.dataRXRl];
          this.initIlChart();
          this.initTXRlChart();
          this.initRXRlChart();
          //从this.tableData中获取第一条数据
          if(this.tableData.length>0){
            this.seq = this.tableData[0].seq;
            this.totalSeq = this.tableData[0].seq;
          }else{
            this.totalSeq = 0;
          }
          this.loading = false;
          this.incrementChartIlData=[];
          this.incrementChartTXRlData=[];
          this.incrementChartRXRlData=[];
          // 启动定时任务
          this.timer = setInterval(() => {
            this.getIncrementalData();
          }, 30000); // 每分钟查询一次增量数据
      });
    },
    getIncrementalData() {
      if (!this.docNo) {
        return;
      }
      // 调用接口获取增量数据
      ilRlGENIncremental(this.docNo, this.totalSeq,this.deviceSn).then(response => {
        this.incrementChartIlData = [...this.incrementChartIlData,...response.data.dataIl];
        this.incrementChartTXRlData = [...this.incrementChartTXRlData,...response.data.dataTXRl];
        this.incrementChartRXRlData = [...this.incrementChartRXRlData,...response.data.dataRXRl];

        // 更新表格数据
        this.tableData = [...response.data.list];
        //从this.tableData中获取第一条数据
        if(this.tableData.length>0){
          this.totalSeq = this.tableData[0].seq;
        }else{
          this.totalSeq = 0;
        }
        // 启动定时任务，处理增量数据
        this.processIncrementalData();
      });
    },
    // 处理增量数据的方法
    processIncrementalData() {
      if (this.incrementChartIlData.length === 0 || this.incrementChartTXRlData.length === 0 || this.incrementChartRXRlData.length === 0) {
        return;
      }
      // 找到增量数据集中大于 this.seq 的第一个数据，从最前面开始查找
      let ilIndex = this.incrementChartIlData.findIndex(item => item.seq > this.seq);
      let rlTXIndex = this.incrementChartTXRlData.findIndex(item => item.seq > this.seq);
      let rlRXIndex = this.incrementChartRXRlData.findIndex(item => item.seq > this.seq);

      // 提取数据
      const ilData = ilIndex >= 0 ? this.incrementChartIlData.splice(ilIndex, 1)[0] : null;
      const rlTXData = rlTXIndex >= 0 ? this.incrementChartTXRlData.splice(rlTXIndex, 1)[0] : null;
      const rlRXData = rlRXIndex >= 0 ? this.incrementChartRXRlData.splice(rlRXIndex, 1)[0] : null;

      // 更新数据集
      if (ilData) {
        this.chartIlData.push(ilData);
        if (this.chartIlData.length > this.total) {
          this.chartIlData.shift();
        }
      }
      if (rlTXData) {
        this.chartTXRlData.push(rlTXData);
        if (this.chartTXRlData.length > this.total) {
          this.chartTXRlData.shift();
        }
      }
      if (rlRXData) {
        this.chartRXRlData.push(rlRXData);
        if (this.chartRXRlData.length > this.total) {
          this.chartRXRlData.shift();
        }
      }

      // 更新序列号
      if (ilData) {
        this.seq = ilData.seq;
      }
      // 更新图表
      this.updateCharts();
      // 更新增量数据集为最新的且seq大于this.seq的数据
      this.incrementChartIlData = this.incrementChartIlData.filter(item => item.seq > this.seq);
      this.incrementChartTXRlData = this.incrementChartTXRlData.filter(item => item.seq > this.seq);
      this.incrementChartRXRlData = this.incrementChartRXRlData.filter(item => item.seq > this.seq);
      // 继续下一轮处理
      setTimeout(() => {
        this.processIncrementalData();
      }, 1000); // 每秒处理一次
    },
    // 更新图表的方法
    updateCharts() {
        this.chartIl.setOption({
          xAxis: {
            data: this.chartIlData.map(item => item.xAxis),
          },
          series: [{
            data: this.chartIlData.map(item => item.il),
          }]
        });
        this.chartTXRl.setOption({
          xAxis: {
            data: this.chartTXRlData.map(item => item.xAxis),
          },
          series: [{
            data: this.chartTXRlData.map(item => item.rl),
          }]
        });
        this.chartRXRl.setOption({
          xAxis: {
            data: this.chartRXRlData.map(item => item.xAxis),
          },
          series: [{
            data: this.chartRXRlData.map(item => item.rl),
          }]
        });
    },
    initIlChart() {
      this.chartIl = echarts.init(this.$refs.chartIl, "dark");
      const option = {
        title: {
          text: 'GEN1.5-IL'+'-【'+this.docNo+'】', // 主标题文本
          // subtext: '副标题', // 副标题文本
          left: 'center', // 标题水平位置
          textStyle: {
            color: '#000',
            fontSize: 14 // 设置标题字体大小为20
          },
          top:'2%'
        },
        grid: {
          left: '10%',    // 距离左边的距离
          // right: '10%',   // 距离右边的距离
          // top: '10%',     // 距离顶部的距离
          bottom: '20%',  // 距离底部的距离
          // containLabel: true // 包含坐标轴的标签
        },
        backgroundColor: 'rgba(0, 0, 0, 0)',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }

        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
          },
          iconStyle: {
            borderColor: '#444', // 边框颜色
            borderWidth: 1, // 边框宽度
          }
        },
        legend: {
          data: [{name:'IL'},
            {
              name: "IL预警值",
              lineStyle: {
                type: "dotted",
                width: 2,
                color: "orange",
                inactiveColor: "orange",
              },
              itemStyle:{
                opacity:0
              },
              inactiveColor:"#000"
            },
            {
              name: "IL告警值",
              lineStyle: {
                type: "dotted",
                width: 2,
                color: "red",
                inactiveColor: "red",
              },
              itemStyle:{
                opacity:0
              },
              inactiveColor:"#000"
            }],
          top: '12%',
          textStyle: {
            color: '#000' // 设置图例文字颜色为红色
          },
          itemWidth: 13,  // 设置图例标记的宽度
          itemHeight: 8, // 设置图例标记的高度
        },
        xAxis: {
          name: '编码',
          type: 'category',
          nameTextStyle: { // 名称样式
            color: '#000' // 字体颜色
          },
          data: this.chartIlData.map(item => item.xAxis),
          axisLabel: {
            interval: 0, // 显示所有标签
            rotate: -90, // 旋转角度
            fontSize: 8 ,// 修改为需要的字体大小
            color: '#000',
            formatter: function (value, index) {
              return value.split('(').pop().split(')')[0];
            }
          },
          axisLine: {
            lineStyle: {
              color: '#b1b1b1' // 设置纵坐标轴颜色为绿色
            }
          },
          splitLine: {
            show: false // 不显示网格线
          },
        },
        yAxis: {
          name: 'DB',
          nameTextStyle: { // 名称样式
            color: '#000' // 字体颜色
          },
          type: 'value',
          splitNumber: 10, // 设置分割数
          boundaryGap: [0, '5%'], // 上边界留出 5%
          splitLine: {
            show: false // 不显示网格线
          },
          axisLine: {
            lineStyle: {
              color: '#b1b1b1' // 设置纵坐标轴颜色为绿色
            }
          },
          axisLabel: {
            fontSize: 8, // 修改为需要的字体大小
            color: '#000'
          },
          // 设置纵坐标刻度固定
          max: 0.8, // 最大值
          interval:0.1
        },
        series: [
          {
            name: 'IL',
            type: 'line',
            itemStyle:{color:'#048ad1'},
            data: this.chartIlData.map(item => item.il),
            lineStyle: {
              width: 1 // 设置线条宽度
            },
            // 添加两条横向辅助线
            markLine: {
              symbol: 'none', // 去掉箭头
              data: [
  /*              { type: 'average',
                  name: '平均值',
                  label: {
                    formatter: '平均值：{c}',
                    color: '#048ad1', // 文字颜色
                  },
                },*/
                {
                  label: {
                  /*  formatter: '预警值：{c}',
                    color: 'orange', // 文字颜色*/
                    formatter: '',
                  },
                  yAxis: 0.3, // 辅助线的位置
                  lineStyle: {
                    color: 'orange', // 辅助线的颜色
                    width: 1 // 辅助线的宽度
                  }
                },
                {
                  label: {
                  /*  formatter: '告警值：{c}',
                    color: 'red', // 文字颜色*/
                    formatter: '',
                  },
                  yAxis: 0.35, // 辅助线的位置
                  lineStyle: {
                    color: 'red', // 辅助线的颜色
                    width: 1 // 辅助线的宽度
                  },

                }
              ]
            },
          },
          {
            name: "IL预警值",
            type: "line",
            symbol: "none",
            color: "transparent",
          },
          {
            name: "IL告警值",
            type: "line",
            symbol: "none",
            color: "transparent",
          },
        ]
      };

      this.chartIl.setOption(option);
    },
    initTXRlChart() {
      this.chartTXRl = echarts.init(this.$refs.chartTXRl, "dark");
      const option = {
        title: {
          text: 'GEN1.5-RX RL'+'-【'+this.docNo+'】', // 主标题文本
          // subtext: '副标题', // 副标题文本
          left: 'center', // 标题水平位置
          textStyle: {
            color: '#000',
            fontSize: 14 // 设置标题字体大小为20
          },
          top:'2%'
        },
        grid: {
          left: '10%',    // 距离左边的距离
          // right: '10%',   // 距离右边的距离
          // top: '10%',     // 距离顶部的距离
          bottom: '30%',  // 距离底部的距离
          // containLabel: true // 包含坐标轴的标签
        },
        backgroundColor: 'rgba(0, 0, 0, 0)',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
          },
          iconStyle: {
            borderColor: '#444', // 边框颜色
            borderWidth: 1, // 边框宽度
          }
        },
        legend: {
          data: [{name:'RX RL'},
            {
              name: "RX RL预警值",
              lineStyle: {
                type: "dotted",
                width: 2,
                color: "orange",
                inactiveColor: "orange",
              },
              itemStyle:{
                opacity:0
              },
              inactiveColor:"#000"
            },
            {
              name: "RX RL告警值",
              lineStyle: {
                type: "dotted",
                width: 2,
                color: "red",
                inactiveColor: "red",
              },
              itemStyle:{
                opacity:0
              },
              inactiveColor:"#000"
            }],
          top: '12%',
          textStyle: {
            color: '#000' // 设置图例文字颜色为红色
          },
          itemWidth: 13,  // 设置图例标记的宽度
          itemHeight: 8, // 设置图例标记的高度
        },
        xAxis: {
          name: '编码',
          type: 'category',
          nameTextStyle: { // 名称样式
            color: '#000' // 字体颜色
          },
          data: this.chartTXRlData.map(item => item.xAxis),
          axisLabel: {
            interval: 0, // 显示所有标签
            rotate: -90, // 旋转角度
            fontSize: 8 ,// 修改为需要的字体大小
            color: '#000',
            formatter: function (value, index) {
              return value.split('(').pop().split(')')[0];
            }
          },
          axisLine: {
            lineStyle: {
              color: '#b1b1b1' // 设置纵坐标轴颜色为绿色
            }
          },
          splitLine: {
            show: false // 不显示网格线
          },
        },
        yAxis: {
          name: 'DB',
          nameTextStyle: { // 名称样式
            color: '#000' // 字体颜色
          },
          type: 'value',
          splitNumber: 10, // 设置分割数
          boundaryGap: [0, '5%'], // 上边界留出 5%
          splitLine: {
            show: false // 不显示网格线
          },
          axisLine: {
            lineStyle: {
              color: '#b1b1b1' // 设置纵坐标轴颜色为绿色
            }
          },
          axisLabel: {
            fontSize: 8, // 修改为需要的字体大小
            color: '#000'
          },
          // 设置纵坐标刻度固定
          min:20

        },
        series: [
          {
            name: 'RX RL',
            type: 'line',
            itemStyle:{color:'#048ad1'},
            data: this.chartTXRlData.map(item => item.rl),
            lineStyle: {
              width: 1 // 设置线条宽度
            },
            // 添加两条横向辅助线
            markLine: {
              symbol: 'none', // 去掉箭头
              data: [
            /* { type: 'average',
                  name: '平均值',
                  label: {
                    formatter: '平均值：{c}',
                    color: '#048ad1', // 文字颜色
                  },
                },*/
                {
                  label: {
                    /*formatter: '预警值：{c}',
                    color: 'orange', // 文字颜色*/
                    formatter: '',
                  },
                  yAxis: 47, // 辅助线的位置
                  lineStyle: {
                    color: 'orange', // 辅助线的颜色
                    width: 1 // 辅助线的宽度
                  }
                },
                {
                  label: {
                    /*formatter: '告警值：{c}',
                    color: 'red', // 文字颜色*/
                    formatter: '',
                  },
                  yAxis: 45, // 辅助线的位置
                  lineStyle: {
                    color: 'red', // 辅助线的颜色
                    width: 1 // 辅助线的宽度
                  },

                }
              ]
            },
          },
          {
            name: "RX RL预警值",
            type: "line",
            symbol: "none",
            color: "transparent",
          },
          {
            name: "RX RL告警值",
            type: "line",
            symbol: "none",
            color: "transparent",
          },
        ]
      };

      this.chartTXRl.setOption(option);
    },
    initRXRlChart() {
      this.chartRXRl = echarts.init(this.$refs.chartRXRl, "dark");
      const option = {
        title: {
          text: 'GEN1.5-TX RL'+'-【'+this.docNo+'】', // 主标题文本
          // subtext: '副标题', // 副标题文本
          left: 'center', // 标题水平位置
          textStyle: {
            color: '#000',
            fontSize: 14 // 设置标题字体大小为20
          },
          top:'2%'
        },
        grid: {
          left: '10%',    // 距离左边的距离
          // right: '10%',   // 距离右边的距离
          // top: '10%',     // 距离顶部的距离
          bottom: '30%',  // 距离底部的距离
          // containLabel: true // 包含坐标轴的标签
        },
        backgroundColor: 'rgba(0, 0, 0, 0)',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
          },
          iconStyle: {
            borderColor: '#444', // 边框颜色
            borderWidth: 1, // 边框宽度
          }
        },
        legend: {
          data: [{name:'TX RL'},
            {
              name: "TX RL预警值",
              lineStyle: {
                type: "dotted",
                width: 2,
                color: "orange",
                inactiveColor: "orange",
              },
              itemStyle:{
                opacity:0
              },
              inactiveColor:"#000"
            },
            {
              name: "TX RL告警值",
              lineStyle: {
                type: "dotted",
                width: 2,
                color: "red",
                inactiveColor: "red",
              },
              itemStyle:{
                opacity:0
              },
              inactiveColor:"#000"
            }],
          top: '12%',
          textStyle: {
            color: '#000' // 设置图例文字颜色为红色
          },
          itemWidth: 13,  // 设置图例标记的宽度
          itemHeight: 8, // 设置图例标记的高度
        },
        xAxis: {
          name: '编码',
          type: 'category',
          nameTextStyle: { // 名称样式
            color: '#000' // 字体颜色
          },
          data: this.chartRXRlData.map(item => item.xAxis),
          axisLabel: {
            interval: 0, // 显示所有标签
            rotate: -90, // 旋转角度
            fontSize: 8 ,// 修改为需要的字体大小
            color: '#000',
            formatter: function (value, index) {
              return value.split('(').pop().split(')')[0];
            }
          },
          axisLine: {
            lineStyle: {
              color: '#b1b1b1' // 设置纵坐标轴颜色为绿色
            }
          },
          splitLine: {
            show: false // 不显示网格线
          },
        },
        yAxis: {
          name: 'DB',
          nameTextStyle: { // 名称样式
            color: '#000' // 字体颜色
          },
          type: 'value',
          splitNumber: 10, // 设置分割数
          boundaryGap: [0, '5%'], // 上边界留出 5%
          splitLine: {
            show: false // 不显示网格线
          },
          axisLine: {
            lineStyle: {
              color: '#b1b1b1' // 设置纵坐标轴颜色为绿色
            }
          },
          axisLabel: {
            fontSize: 8, // 修改为需要的字体大小
            color: '#000'
          },
          // 设置纵坐标刻度固定
          min:20

        },
        series: [
          {
            name: 'TX RL',
            type: 'line',
            itemStyle:{color:'#048ad1'},
            data: this.chartRXRlData.map(item => item.rl),
            lineStyle: {
              width: 1 // 设置线条宽度
            },
            // 添加两条横向辅助线
            markLine: {
              symbol: 'none', // 去掉箭头
              data: [
                /* { type: 'average',
                      name: '平均值',
                      label: {
                        formatter: '平均值：{c}',
                        color: '#048ad1', // 文字颜色
                      },
                    },*/
                {
                  label: {
                    /*formatter: '预警值：{c}',
                    color: 'orange', // 文字颜色*/
                    formatter: '',
                  },
                  yAxis: 35, // 辅助线的位置
                  lineStyle: {
                    color: 'orange', // 辅助线的颜色
                    width: 1 // 辅助线的宽度
                  }
                },
                {
                  label: {
                    /*formatter: '告警值：{c}',
                    color: 'red', // 文字颜色*/
                    formatter: '',
                  },
                  yAxis: 33, // 辅助线的位置
                  lineStyle: {
                    color: 'red', // 辅助线的颜色
                    width: 1 // 辅助线的宽度
                  },

                }
              ]
            },
          },
          {
            name: "TX RL预警值",
            type: "line",
            symbol: "none",
            color: "transparent",
          },
          {
            name: "TX RL告警值",
            type: "line",
            symbol: "none",
            color: "transparent",
          },
        ]
      };

      this.chartRXRl.setOption(option);
    },

    onResize() {
      if (this.chartIl) {
        this.chartIl.resize();
      }
      if (this.chartTXRl) {
        this.chartTXRl.resize();
      }
      if (this.chartRXRl) {
        this.chartRXRl.resize();
      }
    },
    //  导出excel
    exportExcel(docNo = null,deviceSn = "null") {
      let actualDocNo = docNo || this.searchDocNo; // 如果传入了工单号参数就用参数，否则用选择框中的工单号
      let actualDeviceSn = deviceSn || this.searchDeviceSn; // 如果传入了工单号参数就用参数，否则用选择框中的工单号
      if (this.isLocked && this.lockedDocNo) {
        actualDocNo = this.lockedDocNo; // 如果处于锁定状态，使用锁定的工单号
        actualDeviceSn = this.lockedDeviceSn; // 如果处于锁定状态，使用锁定的设备编码
        this.searchDocNo = this.lockedDocNo;
        this.searchDeviceSn = this.lockedDeviceSn;
      } else {
        this.searchDocNo = actualDocNo;
        this.searchDeviceSn = actualDeviceSn;
      }
      if (this.validatenull(actualDocNo)) {
        this.$message.error('请选择工单号后再导出');
        return;
      }
      this.docNo = actualDocNo;
      this.deviceSn = actualDeviceSn;
      if(this.validatenull(this.deviceSn)){
        this.deviceSn = 'null';
      }

      this.loading = true; // 开始加载
      this.loadingText = "导出中，请稍等...";
      const obj = {
        docNo: this.docNo,
        deviceSn: this.deviceSn
      }
      this.downBlobFile('/workorder/opltshhs/exportIlRlGEN', obj, this.docNo+'GEN1.5插回损数据.xlsx')
        .then(() => {
          this.loading = false; // 结束加载
          this.$message.success('导出成功')
        }).catch(() => {
        this.loading = false; // 结束加载
        this.$message.error('导出失败')
      })
    },
    handleTabs(){
      this.$nextTick(() => {
        const table = this.$refs.tableGENRef;
        if (table) {
          table.doLayout();
        }
        if (this.chartIl) {
          this.chartIl.resize();
        }
        if (this.chartRl) {
          this.chartRl.resize();
        }
      });
    },

  }
};
</script>
